<template>
   <el-container class="home-container">
      <el-header>
         <span>清水江文书管理系统</span>
         <el-button type="info" @click="logout">安全退出</el-button>
      </el-header>
     <el-container>
        <el-aside width="150px">
         <el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff" :router="true" :default-active="activePath">
            <el-menu-item index="/studentlist" @click="saveNavstate()">
               <template slot="title">
                 <span>学生管理</span>
               </template>
            </el-menu-item>

            <el-menu-item index="/teacherlist" @click="saveNavstate()">
               <template slot="title">
                 <span>教师管理</span>
               </template>
            </el-menu-item>

            <el-menu-item index="/classlist" @click="saveNavstate()">   
               <template slot="title">
                <span>班级管理</span>
               </template>
            </el-menu-item>

            <el-menu-item index="/essaylist" @click="saveNavstate()">
               <template slot="title">
                <span>文书管理</span>
               </template>
            </el-menu-item>
         </el-menu>
        </el-aside>
        <el-main>
           <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>
<script>
export default{
   data:{
      activePath:'/welcome'//默认路径
   },
   create(){
      this.activePath=window.sessionStorage.getItem('activePath');
   },
   methods:{
      //安全退出
      logout(){
         window.sessionStorage.clear();
         this.$router.push("/zhuye");
      },
      saveNavstate(activePath){
         window.sessionStorage.setItem('activePath',activePath);//路径存储在session
         this.activePath=activePath;
      }
   }
}
</script>
<style scoped>
   .home-container{
      height:100%;
   }
   .el-header{
      background-color: #373d41;
      display: flex;
      justify-content: space-between;
      padding-left:0% ;
      align-items: center;
      color: #fff;
      font-size: 150%;
      display:flex;
      align-items:center;
      
   }
   .el-aside{
      background-color:#333744;

   }
   .el-main{
      background-color: #eaedf1;
   }
   img{
      width:55px;
      height:55px;
   }

</style>
